@extends('admin::layouts.master')
@section('content')

    @component('components.tabs',['title'=>'属性管理'])
        @slot('nav')

            <div class="mt-2">
                <a href="" class="btn btn-space btn-primary">属性列表</a>
                <button data-toggle="modal" data-target="#addAttrs" type="button" class="btn btn-space btn-primary">添加属性</button>
            </div>

            {{--模态框--}}
            {{--引入模态框组件开始--}}
            @component('components.modal',['title'=> '添加属性','url'=>route('attrs.store'),'id'=>'addAttrs','style'=>'block'])
                <div class="modal-body">
                    <div class="form-group">
                        <label>添加新的属性</label>
                        <input type="text" name="aname" placeholder="输入新的属性" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>所属的父级属性</label>
                        <select class="form-control" name="pid">
                            <option value="0">顶级属性</option>
                            @foreach($attrs as $v)
                                <option value="{{$v['id']}}">{{$v['aname']}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            @endcomponent
            {{--引入模态框组件结束--}}

        @endslot
        @slot('body')
            <table class="table">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>属性名称</th>
                    <th>创建时间</th>
                    <th class="actions">操作</th>
                </tr>
                </thead>
                <tbody>
                @foreach($allattr as $v)
                    <tr>
                        <td>{{$v['id']}}</td>
                        <td>{{$v['_aname']}}</td>
                        <td>{{$v['created_at']}}</td>
                        <td class="actions">
                            <div class="btn-group btn-space">

                                <button data-toggle="modal" data-target="#editAttr{{$v['id']}}" type="button" class="btn btn-space btn-success">编辑
                                </button>
                                {{--引入模态框组件开始,此处引入模态框组件，只为了编辑功能--}}
                            @component('components.modal',['title'=> '编辑属性','url'=>route('attrs.update',$v['id']),'id'=>'editAttr'.$v['id'],'method'=> 'PUT','style'=>'block'])
                                    <div class="modal-body">

                                        <div class="form-group">
                                            <label>属性编号</label>
                                            <input type="text" readonly name="bianhao" class="form-control" value="{{$v['id']}}">
                                        </div>
                                        <div class="form-group">
                                            <label>属性名称</label>
                                            <input type="text" name="aname" class="form-control" value="{{$v['aname']}}">
                                        </div>
                                        <div class="form-group">
                                            <label>所属的父级属性</label>
                                            <select class="form-control" name="pid">
                                                <option value="0">顶级属性</option>
                                                @foreach($attrs as $vv)
                                                    <option value="{{$vv['id']}}" @if($vv['id']==$v['pid']) selected @endif>{{$vv['aname']}}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                    </div>
                                @endcomponent
                                {{--引入模态框组件结束--}}


                                <form action="{{route('attrs.destroy',$v['id'])}}" method="post">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger">删除</button>
                                </form>

                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        @endslot

    @endcomponent
@endsection